<template>
    <el-card>
        <div class="header">
            <span>销售额类别占比</span>
            <el-radio-group v-model="value" size="medium">
                <el-radio-button label="全部渠道"></el-radio-button>
                <el-radio-button label="线上"></el-radio-button>
                <el-radio-button label="门店"></el-radio-button>
            </el-radio-group>
        </div>
        <div class="charts" ref="charts"></div>
    </el-card>
</template>
<script>
    import * as echarts from 'echarts'
    export default {
        name: 'Category',
        mounted() {
            var myCharts = echarts.init(this.$refs.charts)
            myCharts.setOption({
                title: {
                    text: '',
                    subtext: '',
                    textStyle: {
                        fontSize: 20,
                        color: '#999',
                        fontWeight: 'normal',
                        lineHeight: 30,
                    },
                    subtextStyle: {
                        fontSize: 40,
                        color: '#333',

                    },
                    left: 'center',
                    top: 150
                },
                tooltip: {
                    trigger: 'item'
                },
                grid: {
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                },
                series: [
                    {
                        name: '销售额类别占比',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 3
                        },
                        label: {
                            show: true,
                            position: 'outside'
                        },
                        labelLine: {
                            show: true,
                        },
                        data: [
                            { value: 300, name: '视频广告' },
                            { value: 484, name: '联盟广告' },
                            { value: 580, name: '邮件营销' },
                            { value: 735, name: '直接访问' },
                            { value: 1048, name: '搜索引擎' }
                        ]
                    },
                ]
            })
            // 绑定事件
            myCharts.on('mouseover', (params) => {
                const { name, value } = params.data
                myCharts.setOption({
                    title: {
                        text: name,
                        subtext: value
                    }
                })
            });
        },
        data() {
            return {
                value: '全部渠道'
            }
        },
        methods: {

        },
    }
</script>

<style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        border-bottom: 1px solid #eee;
        height: 40px;
    }

    .charts {
        width: 100%;
        height: 393px;
    }
</style>